<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子向父通信</title>
    <script type="text/javascript" src="../lib/vue/dist/vue.js"></script>

</head>

<style>

    .main{

        width: 100%;
        height: 1200px;
        background-color: #6b94ff;

    }

    .top{

        width: 100%;
        height: 100px;
        background-color: red;


    }

    .content{

        width: 100%;
        height: 100%;
        background-color: yellow;



    }


</style>


<body>
<div id="app">
    {{msg}}
</div>

<script>




    Vcontent = {

        template: `

        <div class="content">我是内容</div>


        `

    }



    Vtop = {

        template:`
        <div class="top"> {{hub}}
        <button @click="changeMethod">字体变大</button>
        </div>
        `,
        data:function () {
            return{

                hub:"我是顶部导航栏"

            }
        },
        methods:{

            changeMethod() {

               this.$emit('change');

            }
            
        }

    }


        var Vmain = {

        template:`

        <div class="main" :style = '{fontSize:postFontSize+"em"}'>

        <Vtop @change="backAlertAction"></Vtop>
        <Vcontent />

       </div>

        `,
            data:function () {
                return{

                    postFontSize: 1

                }
            }
        ,
            components: {

                Vtop,
                Vcontent


            },

            methods: {

            backAlertAction(){



                this.postFontSize += .1;

            }

            }



        }





    new Vue({

        el:"#app",
        template:'<Vmain />',
        data:function () {
            return{

                msg:"xingweixin"

            }
        },

        components:{

            Vmain
        }

    });



</script>




</body>
</html>